<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="resource/style/css/elementui.css">

<script src="resource/js/vue2.js"></script>
<!-- 引入组件库 -->
<script src="resource/js/elementui.js"></script>

<body>
    <div id="app">
        <div class="filter">
            <el-form :inline="true" :model="filter" class="demo-form-inline">
                <el-form-item label="最后一次分配日期">
                    <el-input v-model="filter.distDate" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="行业">
                    <el-input v-model="filter.industry" placeholder=""></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="select">查询</el-button>
                </el-form-item>
                <el-form-item label="招商人员">
                    <el-select v-model="filter.staff" placeholder="招商人员">
                        <el-option label="王xx" value="王xx"></el-option>
                        <el-option label="张xx" value="张xx"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="select">分配</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="customTable">
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="customName" label="客户名称" width="200">
                </el-table-column>
                <el-table-column prop="contact" label="联系人" width="100">
                </el-table-column>
                <el-table-column prop="phone" label="联系方式" width="180">
                </el-table-column>
                <el-table-column prop="industry" label="行业" width="180">
                </el-table-column>
                <el-table-column prop="last" label="最后一次跟进" width="200">
                </el-table-column>
            </el-table>
        </div>

        <div>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>卡片名称</span>
                    <div style="float: right;">
                    <el-button size="mini" type="primary">主要按钮</el-button>
                    <el-button type="success">成功按钮</el-button>
                    <el-button type="info">信息按钮</el-button>
                </div>
                </div>
                <div v-for="o in 4" :key="o" class="text item">
                    {{'列表内容 ' + o }}
                </div>
            </el-card>
        </div>

        <div class="block">
            <span class="demonstration">默认</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>

    </div>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    filter: {
                        distDate: '',
                        industry: '',
                        staff: ''
                    },
                    tableData: [
                        //     {
                        //     customName:'',
                        //     contact:'',
                        //     phone: '',
                        //     industry: '',
                        //     last: ''
                        // }
                    ],
                    value1: [new Date(), new Date()]
                }
            },
            methods: {
                select() {
                    console.log('submit!');
                }
            }
        })
    </script>
</body>

</html>